// 请说出减低页面加载时间的方法？非框架性能优化
{
  /* 
  图片高度压缩、以及开启懒加载（当前窗口之外不显示图片）
  网页开启gzip，
  单页面JS请求数量减少（能合并一起就合并一起）
  CSS渲染顺序优化，避免重绘
  JS或JQ代码尽量减少DOM操作，例如靠JS输出html代码一次性输出，不要分多次输出
  网站icon图标类部分合并成单张减少请求
  */
}

// 什么是http缓存，强缓和协商缓存有什么区别？
{
  /* 
  缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。当 web 缓存发现请求的资源已经被存储，它会拦截请求，返回该资源的拷贝，而不会去源服务器重新下载。这样带来的好处有：缓解服务器端压力，提升性能(获取资源的耗时更短了)
  一个优秀的缓存策略，可以缩短网页请求资源的距离，减少延迟，缓存文件可以重复利用所以还可以减少带宽，降低网路负荷

  强缓存Catch-control > Expries
  Expries
  1、http1.0提出，响应头中的一个字段，绝对时间，用GMT格式的字符串表示
  2、注意：expires是和浏览器本地的时间做对比，是一个绝对时间点，是一个GMT时间
  3、Expires是优化中最理想的情况，因为它根本不会产生请求，所以后端也就无需考虑查询快慢

  Expires的原理 
  1、浏览器第一次向服务器请求资源，浏览器在请求资源的同时，在respond header响应头中加上Expires字段,记录时间例如 Thu, 15 Apr 2021 02:00:06 GMT
  2、浏览器在接收到这个资源后，将这个资源和所有response header一起缓存起来 - 所以，缓存命中的请求返回的header并不是来自服务器，而是来自之前缓存的header 
  3、浏览器再次请求这个资源时，先从缓存中寻找，找到这个资源后，拿出Expires跟当前的请求时间做比较 - 如果当前请求时间，在Expires指定的时间之前，就能命中强缓存，否则不能 - 注意：Expires是和浏览器本地时间作对比 
  4、如果未命中缓存，则浏览器直接从服务器获取资源，并更新response header中的Expires
  expires是较老的强缓存管理header，是服务器返回的一个绝对时间，在服务器时间与客服端时间相差较大时，Expires缓存管理容易出问题（比如：随便修改客户端时间，就能影响命中结果），所以在http1.1中，提出了新的header => Cache-Control，一个相对时间，以秒为单位，用数值表示 


  Catch-control
  1、http1.1提出，响应头中的一个字段，相对时间，以秒为单位，用数值表示
  2、注意：Cache-Control也是和浏览器本地时间做对比，以秒为单位的时间段
  3、Cache-Control可以指定：public 和 private 
  private：表示该资源仅仅属于发出请求的最终用户，这将禁止中间服务器（如代理服务器）缓存此类资源，对于包含用户个人信息的文件，可以设置private
  public：允许所有服务器缓存该资源
  no-cache：使用协商缓存
  no-store：不使用缓存
  max-age: 123123 // 一个时间段，单位是s
  4、Cache-control: no-cache,private,max-age=123123
 
  Cache-Control的原理 
  1、浏览器第一次向服务器请求资源，服务器在返回资源的同时，在response的header中加上Cache-Control字段 
  2、浏览器在接收到这个资源后，会将这个资源和所有的response header一起缓存起来 - 所以，缓存命中的请求返回的header并不是来自服务器，而是来自之前缓存的header 
  3、浏览器再次请求这个资源时，先从缓存中寻找，找到这个资源后，拿出Cache-Control和当前请求的时间做比较 - 如果当前请求时间，在Cache-Control表示的时间段内，就能命中强缓存，否则不能 
  4、如果缓存未命中，则浏览器直接从服务器获取资源，并更新response header中的 Cache-Control
 
  强缓存Expires和Cache-Control总结
  1、Expires和Cache-Control可以开启一个，也可以同时开启
  2、当Expires和Cache-Control同时开启时，Cache-Control优先级高于Expires
  3、Cache-Control可以指定private和public，表示是否允许中间服务器缓存该资源
  4、expires是一个用GMT时间表示的时间点，Cach-Control是用秒表示的时间段，都是和浏览器本地时间做对比


  协商缓存Last-Modified（If-Modified-Since），ETag（If-None-Match）
  Last-Modified解析
  浏览器请求 → 服务器返回Last-Modified字段（最后修改时间） → 浏览器再次请求 → 浏览器请求头携带字段If-Modified-Since:服务器返回的最后修改时间 →  服务器拿If-Modified-Since和服务器中资源最后修改时间对比 → 相等返回304读取缓存，小于最后修改时间重复第一次访问
 
  ETag解析
  浏览器请求 → 服务器返回ETagd字段（根据当前文件的内容生成的唯一标识码） → 浏览器再次请求 → 浏览器请求头携带字段If-None-Match:唯一标识码  → 服务器拿If-None-Match和服务器中资源当前ETag对比 → 相等返回304读取缓存，不等说明资源被更新，需要重新请求


  缓存优先级
  强缓 > 协商缓存
  Catch-control > Expries > Etag > Last-Modified

  强缓存与协商缓存得区别
  资源缓存超出了强缓存限定的时间便是协商缓存了
  */
}

// 什么叫优雅降级和渐进增强？
{
  /* 
  优雅降级就是 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
  渐进增强就是 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

  区别：
  a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
  b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
  c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
  */
}

// 什么是RESTful API？
{
}

// 你了解http协议，简述一下你所了解的http协议
{
  // 超文本传输协议HTTP规定了浏览器与服务器之间的请求和响应的格式与规则，它是万维网上能够可靠地交换文件的重要基础。
  // 超文本传输协议（HyperText Transfer Protocol）是一种应用层协议。
  // HTTP是万维网的数据通信的基础。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法
  // 请求request－响应response 式模式
}

// http三次握手、四次挥手
{
  /* 
  （1）第一次挥手：Client发送一个FIN，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态。 
  （2）第二次挥手：Server收到FIN后，发送一个ACK给Client，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态。 
  （3）第三次挥手：Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态。 
  （4） 第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，Server进入CLOSED状态，完成四次挥手。 

  由于TCP连接时全双工的，因此，每个方向都必须要单独进行关闭，这一原则是当一方完成数据发送任务后，发送一个FIN来终止这一方向的连接，收到一个FIN只是意味着这一方向上没有数据流动了，即不会再收到数据了，但是在这个TCP连接上仍然能够发送数据，直到这一方向也发送了FIN。首先进行关闭的一方将执行主动关闭，而另一方则执行被动关闭
  */
}

// HTTP请求头、响应头解读、常见HTTP status code含义
{
  /* 
  1xx:100-199 提示信息--表示请求已接收，还在继续处理
  2xx:成功--表示请求已被成功接收、理理解、接受
  200:成功--表示请求已被成功接收、理解、接受
  204：请求被受理理但没有资源可以返回
  206：客户端只是请求资源的⼀一部分，服务器器只对请求的部分资源执⾏行行GET⽅方法，相应报⽂文中通过
  Content-Range指定范围的资源。
  3xx：重定向--要完成请求必须进行更进一步的操作
  301：永久性重定向
  302：临时重定向
  303：与302状态码有相似功能，只是它希望客户端在请求一个URI的时候，能通过GET方法重定
  向到另⼀个URI上
  304：发送附带条件的请求时，条件不满足时返回，与重定向无关，从缓存中读取
  307：临时重定向，与302类似，只是强制要求使用POST方法
  还缓存策略也会遇到提示3xx，例如：你向服务器请求缓存，服务器告诉你向本地缓存获取
  4xx:客户端请求错误--请求有语法错误或请求无法实现400
  400：请求报文语法有误，服务器器无法识别
  401：请求需要认证
  403：请求的对应资源禁止被访问，Forbidden 权限不够
  404：Not Found 请求资源不存在
  405：Method Not Allowed 请求方法不被允许
  5xx:服务器端错误--服务器未能实现合法的请求
  500：服务器内部错误
  502：请求到了反向代理了，但是反向代理不过去指定服务器
  503：服务器正忙
  */
}

// http1.1 和 http2 的区别
{
}

// http和https有什么区别？
{
  /* 
  https多了一层证书认证，数据是进行加密处理完的，
  https会消耗服务器性能，比http访问网站要慢一点，因为服务器端要处理加密解密过程
  https端口也不一样，使用的是443
   */
}

// 说说https的具体流程
{
  /* 
  1、首先https需要一套CA数字证书，这类证书要通过第三方代理服务端购买，证书内会有公钥.pub和私钥.rem，私钥是存在服务端不对外公开，公钥是在用户访问时服务端颁发给客户端。
  2、当用户输出url访问网站后，客户端会解析证书先验证证书的合法性（是否过期，域名和请求的域名是否匹配等），如果证书验证不通过会有警告提示。
  3、证书通过后，客户端会通过公钥随机生成key，用于加密数据处理后，发送给服务端。
  4、服务器接收到公钥加密的密文，先使用公钥解密（得到随机的key）、在使用私钥解密成可读取的文本内容。
  5、服务端数据处理完后，然后使用公钥加密（相同的随机key，对称加密），把加密后的二进制数据传递给客户端
  6、客户端接收到数据后，使用公钥进行解密（对称解密）成可读的文本。
  */
}

// https中间人攻击你如何防范处理？
{
  /* 
  首先参考一文https://blog.csdn.net/Linuxprobe18/article/details/79619339
  中间人截取客户端发送给服务器的请求，然后伪装成客户端与服务器进行通信；将服务器返回给客户端的内容发送给客户端，伪装成服务器与客户端进行通信。
  通过这样的手段，便可以获取客户端和服务器之间通信的所有内容。
  使用中间人攻击手段，必须要让客户端信任中间人的证书，如果客户端不信任，则这种攻击手段也无法发挥作用。

  造成中间人劫持的原因是 没有对服务端证书及域名做校验或者校验不完整
  */
}

// 浏览器缓存机制、AMP
{
}

// HTTP缓存是什么?
{
}

// 前端案例：XSS、CSRF、MITM攻击
{
  /* 
    跨站脚本攻击XSS（cross site script）：就是把他人的恶意脚本注入到你的页面中
      反射型：服务端返回脚本，客户端执行（通过URL参数直接注入）
      存储型：后台存储，前端展示（发帖或评论输入内容处，存储到数据库后读取时注入）
      DOM型：基于DOM（流量劫持、DNS劫持，修改页面脚本结构）
    防御方案
      http-only：在 cookie 中设置 HttpOnly 属性后，js脚本将无法读取到 cookie 信息。
      过滤与转译：例如掘金，是有评论功能的然而我们的alert(1)并没有执行不是么？前端是需要对敏感文字做处理的，.innerHTML、.outerHTML、document.write()、eval()、setTimeout()、setInterval()、v-html（vue）、dangerouslySetInnerHTML(react)等甚至 pre  标签也都会直接运行代码需要绝对注意字符串的内容。

    跨站请求伪造CSRF（cross site request forgery）/XSRF
      伪造身份：截取cookie、获取用户信息他用、盗用账号、非法交易、转账
      跨站点: img等标签跨域GET请求、POST自动表单提交、恶意链接跳转，利用登录态及cookie完成跨站伪造请求
    防御方案
      最主要是第三方的冒充，所以要做好身份认证的防范措施
      认证手段：验证 Referer、图片验证、活体认证、语音提示、人脸识别巴拉巴拉…
      token： 页面插入token（隐藏的一个标签内，通常在表单input中，而不是在cookie中），JWT（JSON Web Token）
  */
}

// CDN是什么?没有用到CDN的原因?
{
}

// 都有哪些方式会造成跨域
{
}

// 什么是跨域？跨域请求资源的方法有哪些？
{
  /* 
  跨域是不同域名下，或是相同域名但端口不同、子域名等都是属于跨域访问
  ajax请求动态创建JS标签形式访问
  jq ajax jsonp访问
  vue axios插件直接请求跨域访问
  后端设置请求头

  由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况：

  跨域请求资源的方法：
  (1)、porxy代理，定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。
  实现方法：通过nginx代理；

  (2)、CORS 【Cross-Origin Resource Sharing】
  定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。
  使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作。如下

  (3)、jsonp
  定义和用法：通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。
  特点：通过情况下，通过动态创建script来读取他域的动态资源，获取的数据一般为json格式。
  缺点：
  　　1、这种方式无法发送post请求（这里）
  　　2、另外要确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定
  */
}

// PWA是什么?
{
  /* 
  PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。
  PWA 的优势是可被发现、易安装、可链接、独立于网络、渐进式、可重用、响应性和安全的。
  以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能

  Service Worker的生命周期一共有 installing正在安装、installed安装完成、activeted正在激活、activating激活完成、redundant废弃阶段
  1、首先注册navigator.serviceWorker.register("/sw.js")
  2、接着通过addEventListener监听指定生命周期处理缓存
  */
}

// http1.1和http2相比，都有什么特性
{
  /* 
    http2 使用二进制格式传输、更高效、更紧凑，并且对报头压缩、降低开销
    多路复用，一个网络连接实现并行请求
    服务器主动推送，减少请求的延迟
    默认使用加密
  */
}

// 网站安全性xss，csrf有了解么？具体说下
{
  /* 
  xss是跨站脚本，将代码脚本注入到网站中，从而在服务端或是客户端执行恶意代码的一种攻击网站的手段，
  csrf是跨站请求伪造，对已经登陆过的用户（远程）进行指令操作，虽然攻击者拿不到伪造的cookie信息给攻击者，但可以在用户端直接访问服务端，进行之前预写好的攻击流程手段。
  */
}

// 输入url后都经历了什么
{
  /*
   */
}

// 减少图片体积，减少图片资源请求的方案有哪些？
{
  /* 
  1.雪碧图
  2.图片转base64
  3.webp格式
  4.非详情图片，都可以使用缩略图，而非原始图改变大小，从而减少图片请求大小
  */
}

// sessionStorage 、localStorage 和 cookie 之间的区别
{
  /* 
  共同点：用于浏览器端存储的缓存数据
  不同点：
  (1)、存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费；
  web storage,会将数据保存到本地，不会造成宽带浪费；

  (2)、数据存储大小不同：Cookie数据不能超过4K,适用于会话标识；web storage数据存储可以达到5M;

  (3)、数据存储的有效期限不同：cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器；
  sessionStorage,仅在关闭浏览器之前有效；localStorage数据存储永久有效；

  (4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
  */
}

// Web的Storage与Cookie相比存在的优势
{
  /* 
  (1)、存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。

  (2)、存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。

  (3)、更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，如setItem,getItem,removeItem,clear等,使得数据操作更为简便。cookie需要自己封装。

  (4)、独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱
  */
}

// 前端如何进行seo优化
{
  /* 
  1、合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可；description把页面内容高度概括，不可过分堆砌关键词；keywords列举出重要关键词。

  2、语言化html代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

  3、有含义的图片才加alt

  4、在整体seo权限中，网站的打开速度，没开https都是会影响seo的指标之一

  5、增加高权重友情链接，第三方外链提高seo排名

  6、建立网站地图 SiteMap

  7、重要内容不要用js输出：爬虫不会执行js获取内容

  8、少用iframe：搜索引擎不会抓取iframe中的内容
  */
}
